<template>
  <div>
    <el-button @click="init">LimitedNav</el-button>
    <el-menu router :default-active="$route.path" uniqueOpened>
        <template v-for="node in routesForNav.children">
            <el-submenu v-if="node.type===0" :key="node.routeId" :index="node.routeId" >
                <template #title>{{node.description}}</template>


                <template v-for=" nodeSon in node.children">
                    <el-submenu v-if="nodeSon.type ===0" :key="nodeSon.routeId" :index="nodeSon.routeId">
                        <template #title>{{nodeSon.description}}</template>


                        <template v-for="nodeSonSon in nodeSon.children">
                            <el-submenu v-if="nodeSonSon.type === 0" :key="nodeSonSon.routeId" :index="nodeSonSon.routeId">
                                <template #title>{{nodeSonSon.description}}</template>

                            </el-submenu>
                            <el-menu-item v-else :key="nodeSonSon.routeId" :index="nodeSonSon.path">
                                <template #title>{{nodeSonSon.description}}</template>
                            </el-menu-item>
                        </template>


                    </el-submenu>
                    <el-menu-item v-else :key="nodeSon.routeId" :index="nodeSon.path">
                        <template #title>{{nodeSon.description}}</template>
                    </el-menu-item>
                </template>

            </el-submenu>
            <el-menu-item v-else :key="node.routeId" :index="node.path">
                <template #title>{{node.description}}</template>
            </el-menu-item>
        </template>
    </el-menu>
  </div>
</template>

<script>
// import New from './components/New.vue';
import flat from "@/data/flatRoutes";
import Convert from "@/utils/TreeFlatConvert";
export default {
  name: "LimitedNav",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      localFlatRoutes: [],
      routesForNav:{},
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    //模拟用户点了登录按钮后的载入函数
    init() {
      this.localFlatRoutes = JSON.parse(JSON.stringify(flat));
      this.localFlatRoutes.forEach((x) => {
        x.children = [];
      });
      let c = new Convert({
        flatNodes:this.localFlatRoutes
      });
      this.routesForNav= c.toTreeDirect("routeId","parentId");
      console.log(this.routesForNav)

    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
